<template>
	<view class="container" :style="{ backgroundColor: vuex_theme.color, color: vuex_theme.bgColor }">
		<view class="image-content">
			<image style="width: 150rpx; height: 150rpx; " :src="vuex_theme.logo" @error="imageError" />
		</view>
		<view class="u-m-t-45 u-m-b-60 title">{{ vuex_theme.title }}</view>
		<view class="u-m-b-15 u-f" v-for="(item, index) in vuex_theme.discription.split(',')" :key="index">
			<u-icon name="star" color="#F2F2F2" size="13"></u-icon>
			<text class="u-p-l-15 u-p-r-15">{{ item }}</text>
			<u-icon name="star" color="#F2F2F2" size="13"></u-icon>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<!-- 小程序微信登录 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-m-b-25" >
				<u-button type="success"
					:custom-style="{ backgroundColor: vuex_theme.color, color: vuex_theme.bgColor, fontSize: '30rpx', fontWeight: '600' }"
					:ripple="true" @click="goThreeLogin">
					<view class="u-flex">
						<u-icon class="u-m-r-10" name="weixin-fill" size="50"></u-icon>
						<text>微信登录</text>
					</view>
				</u-button>
			</view>
			<!-- #endif -->
			<!-- H5公众号 微信登录 -->
			<!-- #ifdef H5 -->
			<block v-if="isThreeLogin">
				<!--H5 微信公众号登录 -->
				<view class="u-m-b-25" v-if="vuex_app_id">
					<u-button type="success"
						:custom-style="{ backgroundColor: vuex_theme.color, color: vuex_theme.bgColor, fontSize: '30rpx', fontWeight: '600' }"
						:ripple="true" @click="goThreeLogin">
						<view class="u-flex">
							<u-icon class="u-m-r-10" name="weixin-fill" size="50"></u-icon>
							<text>微信登录</text>
						</view>
					</u-button>
				</view>
				<!-- H5 企业微信登录 -->
				<view class="u-m-b-25" v-if="isWxWorkBrowser">
					<u-button type="success"
						:custom-style="{ backgroundColor: vuex_theme.color, color: vuex_theme.bgColor, fontSize: '30rpx', fontWeight: '600' }"
						:ripple="true" @click="goThreeLogin">
						<view class="u-flex">
							<u-icon class="u-m-r-10" name="weixin-fill" size="50"></u-icon>
							<text>微信登录</text>
						</view>
					</u-button>
				</view>
			</block>
			<!-- #endif -->
			<u-button type="primary"
				:custom-style="{ backgroundColor: '#F2F2F2', color: vuex_theme.color, fontSize: '30rpx', fontWeight: '600' }"
				:ripple="true" @click="accountLogin">
				<view class="u-flex">
					<u-icon class="u-m-r-10" name="lock-fill" size="50"></u-icon>
					<text>账号登录</text>
				</view>
			</u-button>
			<!-- <view class="u-m-b-25">
				<u-button type="success"
					:custom-style="{ backgroundColor: vuex_theme.color, color: vuex_theme.bgColor, fontSize: '30rpx', fontWeight: '600' }"
					:ripple="true" @click="accountLogin">
					<view class="u-flex">
						<u-icon class="u-m-r-10" name="lock-fill" size="50"></u-icon>
						<text>账号登录</text>
					</view>
				</u-button>
			</view> -->
		</view>
	</view>
</template>
<script>
import { processingImages, getImgUrl, isWeiXinBrowser,isWxWorkBrowser } from '@/common/mUtils'
import { loginfunc } from '@/common/fa.mixin.js'
export default {
	mixins: [loginfunc],
	data() {
		return {
			dealeruser: {},
			isThreeLogin: false,
		}
	},
	filters: {
		//图片地址url 拼接
		changImg(val) {
			if (val) {
				return getImgUrl(val)
			} else {
				return ''
			}
		},
	},
	components: {

	},
	onLoad(e) {
		this.type = e.type
		// #ifdef H5
		if (isWeiXinBrowser()) {
			this.isThreeLogin = true;
		}
		// #endif
	},
	onShow() {
		// 小程序顶部样式修改
		uni.setNavigationBarColor({
			frontColor: this.vuex_theme.bgColor,
			backgroundColor: this.vuex_theme.color,
			animation: {
				duration: 0,
				timingFunc: 'easeIn'
			}
		})
	},
	methods: {
		goThreeLogin: async function () {
			const sinfo = uni.getSystemInfoSync();
			// #ifdef MP-WEIXIN
			// this.$u.route('/pages/login/wxlogin?index=3');
			let _this = this
			if (sinfo.environment == 'wxwork') { //企业微信端
				//企业微信端小程序逻辑处理
				wx.qy.login({
					success: function (res) {
						console.log(res)
						if (res.code) {
							//发起网络请求
							uni.getUserInfo({
								success: function (e) {
									console.log(e)
									uni.showLoading({
										title: '请稍后',
										mask: true
									});
									_this.$u.api.onQywxMp({
										code: res.code,
										encrypted_data: e.encryptedData,
										iv: e.iv,
									}).then(res => {
										console.log(res)
										if (res.code == 1) {
											// vuex储存 token
											_this.$u.vuex('vuex_token', res.data.token)
											uni.showToast({
												title: res.msg,
												icon: 'success',
												duration: 2000
											})
											// 登录成功 跳转首页
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/index/index'
												});
											}, 1000)
										} else {
											console.log(res.data)
											// vuex储存 openid usertoken
											if (res.data) {
												uni.showModal({
													title: '提示',
													content: res.msg,
													success: function (r) {
														if (r.confirm) {
															// 跳转注册
															_this.$u.route('pages/login/apply', { refresh_token: res.data.refresh_token })
														} else if (r.cancel) {
															console.log('取消')
														}
													}
												})
											}
										}
										uni.hideLoading();
									})
								},
								fail: function (res) {
									console.log(res)
									uni.showModal({
										title: '提示',
										content: res,
									})
								}
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					},
					fail: function (res) {
						console.log(res)
						uni.showModal({
							title: '提示',
							content: res,
						})
					}
				});
			} else {
				//微信端逻辑处理
				this.onLogin()
			}
			// #endif

			// #ifdef H5
			if (isWxWorkBrowser()){
				// 企业微信端
				this.goQyWxAuth()
			} else {
				// 微信端
				this.goAuth()
			}
			// #endif

		},
		// 关闭提示
		colse() {
			this.referrerShow = !this.referrerShow
		},
		// 账号登录
		accountLogin() {
			this.$u.route('pages/login/apply', {
				type: this.type
			});
		},
		// 微信小程序登录
		onLogin() {
			let _this = this
			// 进行登录
			uni.login({
				provider: 'weixin',
				success: function (res) {
					console.log(res)
					uni.getUserInfo({
						success: function (e) {
							uni.showLoading({
								title: '请稍后',
								mask: true
							});
							_this.$u.api.onWxlogin({
								code: res.code,
								encrypted_data: e.encryptedData,
								iv: e.iv,
							}).then(res => {
								console.log(res)
								if (res.code == 1) {
									// vuex储存 token
									_this.$u.vuex('vuex_token', res.data.token)
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 2000
									})
									// 登录成功 跳转首页
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}, 1000)
								} else {
									console.log(res.data)
									// vuex储存 openid usertoken
									if (res.data) {
										uni.showModal({
											title: '提示',
											content: res.msg,
											success: function (r) {
												if (r.confirm) {
													// 跳转注册
													_this.$u.route('pages/login/apply', { refresh_token: res.data.refresh_token })
												} else if (r.cancel) {
													console.log('取消')
												}
											}
										})
									}
								}
								uni.hideLoading();
							})
						},
						fail: function(res) {
							console.log(res)
						}
					})
				},fail: function(res) {
					console.log(res)
				}
				
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	z-index: 0;
	overflow: hidden;
	text-align: center;
}

.container::after {
	content: '';
	width: 140%;
	position: absolute;
	left: -20%;
	height: 580rpx;
	bottom: 0;
	z-index: -1;
	border-radius: 50% 50% 0 0;
	background-color: #fff;
}

.image-content {
	padding-top: 100rpx;
}

.title {
	font-size: 48rpx;
	font-weight: 600;
}

.u-f {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35rpx;
}

.bottom {
	position: absolute;
	bottom: 15%;
	left: 24%;
	right: 24%;
}

.hover {
	color: #fff;
	background-color: rgba(0, 0, 0, 0.15)
}</style>
